<template>
  <div class="head">
    <div class="tq">
      <div class="l1">
        <!-- <img :src="weatherData.observe.weather_img" /> -->
        <text style="padding-right: 10px">{{ weatherData.observe.weather
                        }}</text>
        <text>{{ weatherData.observe.weather_current }}°C</text>
      </div>
      <div class="l2">空气质量{{ weatherData.air.aqi }}</div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
  title: {
    type: String,
    default: '南县智慧燃气二维管理'
  }
})
/*
 *时间天气显示
 */
const dateDay = ref(null)
const dateYear = ref(null)
const dateWeek = ref(null)
const weekday = ref([
  '星期日',
  '星期一',
  '星期二',
  '星期三',
  '星期四',
  '星期五',
  '星期六'
])
const timer = ref(null)
timer.value = setInterval(() => {
  const date = dayjs(new Date())
  dateDay.value = date.format('HH:mm:ss')
  dateYear.value = date.format('YYYY-MM-DD')
  dateWeek.value = date.format(weekday.value[date.day()])
}, 1000)

const weatherData = ref({
  air: {},
  observe: {}
})
const jsonp = (options) => {
  // 动态创建script标签
  var script = document.createElement('script')
  // 拼接字符串的变量
  var params = ''

  for (var attr in options.data) {
    params += '&' + attr + '=' + options.data[attr]
  }
  // klJsonp0124741
  var fnName = 'klJsonp' + Math.random().toString().replace('.', '')

  // 我们要想办法将它变成全局函数
  window[fnName] = options.success
  // 为script标签添加src属性
  script.src = options.url + '?callback=' + fnName + params
  // 将script标签追加到页面中
  document.body.appendChild(script)
  // 为script标签添加onload事件
  script.onload = function () {
    document.body.removeChild(script)
  }
}
//获取天气信息
const getWeather = () => {
  jsonp({
    url: 'https://wis.qq.com/weather/common',
    method: 'get',
    data: {
      source: 'pc',
      weather_type: 'observe|air|forecast_24h',
      province: '湖南省',
      city: '益阳市',
      county: '南县'
    },
    success: function (res) {
      let day = {
        1: '星期一',
        2: '星期二',
        3: '星期三',
        4: '星期四',
        5: '星期五',
        6: '星期六',
        0: '星期日'
      }
      weatherData.value = res.data
      weatherData.value.observe.weather_img =
        'https://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/currentweather/day/' +
        res.data.observe.weather_code +
        '.png'
      weatherData.value.observe.weather_current =
        res.data.forecast_24h[1].min_degree +
        '-' +
        res.data.forecast_24h[1].max_degree

      for (let i = 0; i < 8; i++) {
        weatherData.value.forecast_24h[i].day =
          day[new Date(weatherData.value.forecast_24h[i].time).getDay()]
      }
    }
  })
}
/*
 *时间天气显示结束
 */
onMounted(() => {
  getWeather()
})
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'yjsz';
  src: url('/static/ttf/yjsz.TTF');
  font-weight: normal;
  font-style: normal;
}

.head {
  display: flex;
  height: 1.5rem;
  background: url(@/assets/icon/border_top.png) no-repeat;
  background-size: 100% 100%;
  color: #fff;
  z-index: 999;
  position: relative;
  width: 80%;
  pointer-events: none;
  left: 10%;

  .tq {
    display: flex;
    font-family: yjsz;
    font-size: 15px;
    width: 240px;
    position: fixed;
    top: 30px;
    right: 0;

    .l1 {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 700;

      img {
        width: 15px;
        margin-right: 10px;
      }

      text {
        margin-top: 0px;
      }
    }

    .l2 {
      padding: 0 10px;
      font-family: ysbth;
    }
  }
}
</style>
